<template>
  <section>
    <swiper :auto="true" height="220px" :list="demo01_list" v-model="demo01_index" @on-index-change="demo01_onIndexChange"></swiper>
    <group :title="coffee.name" v-for="(coffee , index) in product.coffees" :key="coffee.id">
      <cell v-if="coffee.manor&&coffee.manor.area.flag && coffee.manor.area.flag!='UNSELECTED'" title="生豆原产国" :value="coffee.manor.area.flag.name + ' ' +coffee.manor.area.flag.icon "></cell>
      <cell v-if="coffee.manor&&coffee.manor.area" is-link title="产区" :value="coffee.manor.area.name" @click.native="toArea(index)"></cell>
      <cell v-if="coffee.manor&&coffee.manor.name" title="庄园" :value="coffee.manor.name"></cell>
      <cell v-if="coffee.manor&&coffee.manor.flavor" title="风味" :value="coffee.manor.flavor"></cell>
      <cell v-if="coffee.manor&&coffee.manor.type" title="品种" :value="coffee.manor.type"></cell>
      <cell v-if="coffee.manor&&coffee.manor.pickingTime" title="采摘时间" :value="coffee.manor.pickingTime"></cell>
      <card v-if="coffee.manor&&coffee.manor.description" :header="{title: '庄园详情' }">
        <p slot="content" class="card-padding" v-html="coffee.manor.description"></p>
      </card>
    </group>
  </section>
</template>

<script>
import { Swiper, SwiperItem, Group, Cell, Card } from "vux";
import { mapState, mapGetters, mapMutations } from "vuex";
export default {
  components: {
    Swiper,
    SwiperItem,
    Group,
    Cell,
    Card
  },
  data() {
    return {
      demo01_index: 0,
      demo01_list: [
        {
          url: "javascript:",
          img: "/wap/static/swiper/1.jpg"
        },
        {
          url: "javascript:",
          img: "/wap/static/swiper/2.jpg"
        },
        {
          url: "javascript:",
          img: "/wap/static/swiper/3.jpg"
        },
        {
          url: "javascript:",
          img: "/wap/static/swiper/4.jpg"
        },
        {
          url: "javascript:",
          img: "/wap/static/swiper/5.jpg"
        },
        {
          url: "javascript:",
          img: "/wap/static/swiper/6.jpg"
        },
        {
          url: "javascript:",
          img: "/wap/static/swiper/7.jpg"
        }
      ]
    };
  },
  computed: {
    ...mapState({
      product: state => state.product
    })
  },
  methods: {
    toArea(index) {
      console.log(index);
      this.$router.push({
        path: "/area/" + this.$route.params.id + "/" + index
      });
    },
    demo01_onIndexChange(index) {
      this.demo01_index = index;
    }
  },
  created() {
    console.log(this.$route.params.id);
  }
};
</script>

<style scoped>
.weui-grid__label {
  color: #6c6c6c;
}
.fa {
  font-size: 36px;
  color: #04be02;
}
.weui-grid__icon {
  margin-bottom: 5px;
}
.vux-demo {
  text-align: center;
}
.logo {
  width: 100px;
  height: 100px;
}
.ximg-demo {
  width: 100%;
  height: auto;
}
.ximg-error {
  background-color: yellow;
}
.ximg-error:after {
  content: "加载失败";
  color: red;
}
</style>
